<template>
  <div class="browseBox">
    <div class="tagsbox">
      <div class="boxcenter">
        <!-- 选择书籍分类 -->
        <Tag :tagArr="tagArr" tagname="Genres" @tagFn="tagFn" :type="tags" />
        <Tag :tagArr="typeArr" tagname="Type" @tagFn="typeFn" :type="type" />
        <Tag
          :tagArr="scheduleArr"
          tagname="Schedule"
          @tagFn="scheduleFn"
          :type="scheduleNum"
        />
        <!-- <Tag :tagArr="tollArr" tagname="Toll" /> -->
      </div>
    </div>
    <div class="borwse_center">
      <!-- 书本列表 -->
      <div class="bookList">
        <BookIntroduce :isShow="true" :booksList="booksList.data" />
      </div>
      <div class="pagination">
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="18"
          layout="prev, pager, next, jumper"
          :total="booksList.count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Tag from "../components/BrowseChile/Tag.vue";
import BookIntroduce from "../components/BrowseChile/BookIntroduce.vue";
import { TagsApi, BooksApi, TypesApi } from "@/requery/api";
export default {
  data() {
    return {
      tagArr: [], //分类数组
      typeArr: [], //标签数组
      scheduleArr: [
        { name: "Serialization", id: 0 },
        { name: "finish", id: 1 },
      ], //是否完本  1完本 2连载 0全部
      currentPage: 1, //初始页数
      booksList: [], //书本列表
      page: 1, //页数
      tags: null, //分类
      type: null, //标签
      scheduleNum: null, //是否完本
      bookname: "", //书名
      aa:"",
    };
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.page = val;
      this.booksFz(
        this.page,
        this.$route.query.id,
        this.tape,
        this.scheduleNum,
        this.bookname
      );
    },
    handleCurrentChange(val) {
      this.page = val;
      this.booksFz(
        this.page,
        this.$route.query.id,
        this.tape,
        this.scheduleNum,
        this.bookname
      );
    },
    // 点击标签
    typeFn(id) {
      this.page = 1;
      if (id === -2) {
        this.type = null;
      } else {
        this.type = id;
      }
      this.booksFz(1, this.type, this.tags, this.scheduleNum, this.bookname);
    },
    // 点击分类筛选列表
    tagFn(id) {
      this.page = 1;
      if (id === -2) {
        this.tags = null;
      } else {
        this.tags = id;
      }
      this.booksFz(1, this.type, this.tags, this.scheduleNum, this.bookname);
    },
    // 是否完本
    scheduleFn(id) {
      this.page = 1;
      // id -2是全选 1是完本 2连载
      if (id === -2) {
        this.scheduleNum = null;
      } else if (id === 1) {
        this.scheduleNum = 1;
      } else {
        this.scheduleNum = 0;
      }
      this.booksFz(1, this.type, this.tags, this.scheduleNum, this.bookname);
    },
    //获取书列表
    booksFz(page, tape, tag, is_finish, bookname) {
      BooksApi({
        page: page,
        size: 18,
        type: tape,
        tag: tag,
        is_finish: is_finish,
        book_name: bookname,
      }).then((res) => {
        if (res.code === 200) {
          this.booksList = res;
          this.isShowPagina = true;
        }
        console.log(res);
      });
    },
  },

  async asyncData({query}){

    let tags = query.tagid || null;
    let type = query.id || null;

    let typeArr = []
    var res = await TypesApi()
    if (res.code === 200)
      typeArr = res.data;

    let tagArr = []
    res = await TagsApi({
      page: 1,
      size: 30,
    })
    if (res.code === 200)
      tagArr = res.data;

    let booksList = []
    let isShowPagina = false
    // var res = BooksApi({
    //   page: 1,
    //   size: 18,
    //   type: query.id,
    //   tag: null,
    //   is_finish: null,
    //   book_name: '',
    // })
    // if (res.code === 200) {
    //   booksList = res
    //   isShowPagina = true
    // }

    return {
      tags,
      type,

      typeArr,
      tagArr,

      booksList,
      isShowPagina,
    }
  },

  // created() {
  //   this.tags = this.$route.query.tagid || null;
  //   this.type = this.$route.query.id || null;
  //   console.log(this.$route.query.tagid,'this.$route.query.id');
  //   // 获取标签
  //   TypesApi().then((res) => {
  //     if (res.code == 200) {
  //       this.typeArr = res.data;
  //     }
  //     console.log(res, "tyoe");
  //   });
  //
  //   // 获取分类
  //   TagsApi({
  //     page: 1,
  //     size: 30,
  //   }).then((res) => {
  //     if (res.code == 200) {
  //       this.tagArr = res.data;
  //     }
  //     console.log(res);
  //   });
  //   //获取书列表
  //   // this.booksFz(
  //   //   1,
  //   //   this.$route.query.id,
  //   //   this.tape,
  //   //   this.scheduleNum,
  //   //   this.bookname
  //   // );
  // },
  components: {
    Tag,
    BookIntroduce,
  },
  computed: {
    contractFile() {
      // return this.$store.state.inputtext;
      return false
    },
  },
  watch: {
    contractFile: {
      immediate: true,
      handler: function (newval) {
        this.bookname = newval;
        this.booksFz(
          1,
          this.$route.query.id,
          this.$route.query.tagid,
          this.scheduleNum,
          this.bookname
        );
        console.log(newval, "newval");
      },
    },
  },
};
</script>

<style lang = "less" scoped>
.browseBox {
  width: 100%;
  /* height: 100%; */
  .tagsbox {
    height: 266px;
    background: #f8f8f8;
    .boxcenter {
      padding-top: 30px;
      box-sizing: border-box;
      width: 1160px;
      margin: 0 auto;
    }
  }
  .borwse_center {
    width: 1160px;
    /* height: 100%; */
    margin: 0 auto;
    padding-top: 40px;
    box-sizing: border-box;
    /* background-color: #909; */
    .bookList:after {
      content: "";
      width: 358px;
    }
    .pagination {
      width: 1160px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
    }
  }
}
</style>
